<!DOCTYPE html>
<html>
<head>
    <title>动态圣诞树</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>

<script>
    // 获取Canvas元素和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 定义圣诞树的参数
    var x = canvas.width / 2;   // 中心X坐标
    var y = canvas.height / 2;  // 中心Y坐标
    var treeHeight = 300;       // 圣诞树高度
    var treeWidth = 200;        // 圣诞树宽度
    var treeColor = '#006600';  // 圣诞树颜色
    var trunkColor = '#663300'; // 树干颜色
    var trunkHeight = 50;       // 树干高度
    var trunkWidth = 25;        // 树干宽度

    // 定义圣诞树的函数
    function drawTree() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制圣诞树
        ctx.fillStyle = treeColor;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x - treeWidth / 2, y + treeHeight);
        ctx.lineTo(x + treeWidth / 2, y + treeHeight);
        ctx.closePath();
        ctx.fill();

        // 绘制树干
        ctx.fillStyle = trunkColor;
        ctx.fillRect(x - trunkWidth / 2, y + treeHeight, trunkWidth, trunkHeight);
    }

    // 动态绘制圣诞树
    function animate() {
        // 计算圣诞树高度和宽度
        treeHeight += Math.sin(Date.now() / 1000) * 10;
        treeWidth += Math.sin(Date.now() / 1000) * 5;

        // 限制圣诞树高度和宽度的最小值和最大值
        if (treeHeight < 100) {
            treeHeight = 100;
        }
        if (treeHeight > 400) {
            treeHeight = 400;
        }
        if (treeWidth < 100) {
            treeWidth = 100;
        }
        if (treeWidth > 300) {
            treeWidth = 300;
        }

        // 绘制圣诞树
        drawTree();

        // 循环动画
        requestAnimationFrame(animate);
    }

    // 开始动画
    animate();
</script>
</body>
</html>
